import { useState, useEffect, useRef, useContext } from 'react'
import PanelLeft from '../../../../../common/PanelLeft';
import Hd from './Hd';
import Sksq from './Sksq';
import Yq from './Yq';
import './index.less';

import HdDetail from './HdDetail'
import YqDetail from './YqDetail';
import SkDetail from './SkDetail';
import Example from '../example';
import ShowCity from '../ShowCity';
import Fxpg from '../Fxjc/Fxpg'
import { resourcePath } from '../../../../../../utils/resource'
import useBusinessMap from '../../../../../common/BusinessMap/useBusinessMap';
import JcdApi from '../../../../../../utils/apis/JcdApi';
import { clearHighlight, createLayer, dataToFeature } from '../../../../../../utils/helper/mapHelper';

import { Icon, Style } from 'ol/style';
import JcyjApi from '../../../../../../utils/apis/JcyjApi';
import Yujinmsg from '../Yujinmsg';
import { data } from 'browserslist';
import hdPng from './images/hd.png';
import { Button, Tooltip } from 'antd';
import bootstrap from 'bootstrap/dist/js/bootstrap.bundle';
import { Overlay } from 'ol';
import { toStringHDMS } from 'ol/coordinate';
import { toLonLat } from 'ol/proj';
import Xq from './Xq';
import DzenXqDetail from './DzenXqDetail';
import jcyjContext from '../jcyjContext';
import WaterInformation from './Water_Information'
import CztApi from '../../../../../../utils/apis/CztApi';
import JzzyApi from '../../../../../../utils/apis/JzzyApi';
import Select from 'ol/interaction/Select';
import { pointerMove } from 'ol/events/condition';


export default function Fxjc(props) {
    const [datas, setDatas] = useState();
    const { setCbYxList } = props;

    const [rightVisible, setRightVisible] = useState(true);
    const map = useBusinessMap();
    // clearHighlight(map);
    const [yqDetailItem, setYqDetailItem] = useState();
    const [hdDetailItem, setHdDetailItem] = useState();
    const [skDetailItem, setSkDetailItem] = useState();
    const { jcdListDates, jcDates, setJyl } = useContext(jcyjContext)
    const [layers, setLayers] = useState();
    const [qp, setqp] = useState()
    //
    const [b, setA] = useState(600);
    //用于详情数据更新
    const [datas3, setDatas3] = useState();
    const [datas2, setDatas2] = useState();
    const [datas1, setDatas1] = useState();
    function datagx(a) {
        setDatas1(a);

    }
    useEffect(() => {
        JcyjApi.map_color_jyl().then(resp => {
            if (resp.data) {
                const a = resp.data.map(e => {
                    return { name: e.qx, value: e.data, }
                })
                //console.log(a)
                setJyl(a)
            }

        })
        // setJyl([{
        //     name: '翠屏区', value: '2',
        // }, {
        //     name: '南溪区', value: '7',
        // }, {
        //     name: '叙州区', value: '10',
        // }, {
        //     name: '江安县', value: '34',
        // }, {
        //     name: '长宁县', value: '25',
        // }, {
        //     name: '高县', value: '66',
        // }, {
        //     name: '珙县', value: '147',
        // }, {
        //     name: '筠连县', value: '255',
        // }, {
        //     name: '兴文县', value: '23',
        // }, {
        //     name: '屏山县', value: '56',
        // }, {

        // }])
    }, [setJyl])
    useEffect(() => {
        if (map) {
            const handler = evt => {
                const features = map.getFeaturesAtPixel(evt.pixel);
                //console.log('features',features)
                const item = features?.find(feature => feature.get('jcdlx'))?.getProperties();
                console.log('item', item)
                if (item) {
                    setHdDetailItem(null);
                    setYqDetailItem(null);
                    setSkDetailItem(null);
                    switch (item.jcdlx) {
                        case '河道':
                            setHdDetailItem(item);
                            break;
                        case '气象':
                            setYqDetailItem(item);
                            break;
                        case 'RR':
                            setSkDetailItem(item);
                            break;
                        default:
                    }
                }

            }
            map.on('singleclick', handler);

            return () => {
                map.un('singleclick', handler);
            }
        }
    }, [map])

    useEffect(() => {
        /*  --水库
         --jcjjx：监测点警戒线值
         --ksw：水库现水位
         --sw：河道水位
         --rjyl：雨情，日降雨量 */
        // let jcjjx=jcDates?.item?.jcjjx;
        // let ksw=jcDates?.data?.map(e=>e.ksw)[0];
        // let sw=jcDates?.data?.map(e=>e.sw)[0];
        // let rjyl=jcDates?.data?.map(e=>e.rjyl)[0];
        //console.log("skDates",jcjjx,ksw)
        /*判断jcjjx与ksw的差值来改变图标路径*/
        // const yq=1?'yq_red':'yq_org';
        // const hd=1?'hd':'xx';
        // const sk=1?'sk':'xx';
        //console.log("警戒线",jcDates?.item?.jcjjx,'河道',jcDates?.data?.map(e=>e.sw)[0],'雨情',jcDates?.data?.map(e=>e.rjyl)[0],'水库',jcDates?.data?.map(e=>e.ksw)[0])


        if (map) {
            let yqLayer, hdLayer, skLayer;

            const features = jcdListDates?.rows?.filter(row => {
                return row.geom
            })?.map(item => {
                // console.log("jg",item)
                return dataToFeature(item)
            })

            yqLayer = createLayer((feature) => {
                //rjyl：获取最新的一条监测数据
                const rjyl = b;
                let jcjjx = feature.get('jcjjx');
                const a = jcjjx - rjyl;
                let yq = (a <= -50) ? 'yq_blue' : (a <= 50 && a > -50) ? 'yq_yellow' : (a <= 100 && a > 50) ? 'yq_org' : 'yq_red';
                return new Style({
                    image: new Icon({
                        src: resourcePath.mapIcons[`${yq}`],
                        scale: 0.7,
                        anchor: [0.5, 1]
                        // size: [60, 98],  
                        // scale: 1 / 24
                    })
                })
            }, features?.filter(feature => feature.get('jcdlx') === '气象') || []);
            yqLayer.set('type', 'yq')
            yqLayer.set('layerName', 'icon-layer');
            hdLayer = createLayer((feature) => {
                //sw：获取最新的一条监测数据
                const sw = 200;
                let jcjjx = feature.get('jcjjx');
                const a = jcjjx - sw;
                let hd = (a <= -50) ? 'hd_blue' : (a <= 50 && a > -50) ? 'hd_yellow' : (a <= 100 && a > 50) ? 'hd_org' : 'hd_red';
                return new Style({
                    image: new Icon({
                        src: resourcePath.mapIcons[`${hd}`],
                        scale: 0.7,
                        anchor: [0.5, 1]
                        // size: [60, 98],
                        // scale: 1 / 24
                    })
                })
            }, features?.filter(feature => feature.get('jcdlx') === '河道'));
            hdLayer.set('type', 'hd')
            hdLayer.set('layerName', 'icon-layer');
            skLayer = createLayer((feature) => {
                //ksw：获取最新的一条监测数据
                const ksw = 500;
                let jcjjx = feature.get('jcjjx');
                const a = jcjjx - ksw;
                let sk = (a <= -50) ? 'sk_blue' : (a <= 50 && a > -50) ? 'sk_yellow' : (a <= 100 && a > 50) ? 'sk_org' : 'sk_red';
                return new Style({
                    image: new Icon({
                        src: resourcePath.mapIcons[`${sk}`],
                        // size: [30, 80],
                        scale: 0.7,
                        anchor: [0.5, 1]
                    })
                })
            }, features?.filter(feature => feature.get('jcdlx') === 'RR'));
            skLayer.set('type', 'sk')
            skLayer.set('layerName', 'icon-layer');
            map.addLayer(yqLayer)
            map.addLayer(hdLayer)
            map.addLayer(skLayer)
            setLayers([yqLayer, hdLayer, skLayer])
            return () => {
                map.removeLayer(yqLayer)
                map.removeLayer(hdLayer)
                map.removeLayer(skLayer)
            }
        }

    }, [map, jcdListDates, jcDates, b])
    useEffect(() => {
        setXlName(null)
    }, [yqDetailItem, hdDetailItem, skDetailItem])



    /* useEffect(() => {
        const interval = setInterval(() => {
            setA(500+Math.random()*500-Math.random()*500)
        }, 5000)
        return () => {
            clearInterval(interval);
        }
    }, []) */




    /*   useEffect(() => {
          if (map) {
            const allLayers = map.getLayers().getArray();
                  console.log('allLayers',[...allLayers].forEach(l => {
                              if (l?.get("layerName") === 'icon-layer')
                                  return l
                          }))
          }
      }, [map]) */

    const [xlName, setXlName] = useState();

    const [showScroll, setShowScroll] = useState(false);
    const [detailItem, setDetailItem] = useState(null);
    const [scrollKey, setScrollKey] = useState(0);


    return <>
        <PanelLeft>
            <div className='fxjc-root' style={{
                width: 350,
                position: "absolute",
                left: 30,
                top: 30,
                bottom: 30,
                background: 'rgba(1,15,31,0.5)',
                // border: '1px solid rgba(9,107,225,0.8)',
                pointerEvents: 'auto',
                overflow: "auto",
                borderRadius: 8,

            }}>

                <Yq onDetail={item => {
                    setHdDetailItem(null);
                    setSkDetailItem(null);
                    setYqDetailItem(item);
                    setDatas1(null)
                }} setShowScroll={setShowScroll} setDetailItem={setDetailItem} setScrollKey={setScrollKey} />
                <Hd onDetail={item => {
                    setYqDetailItem(null);
                    setSkDetailItem(null);
                    setHdDetailItem(item);
                    setDatas1(null)
                }} setShowScroll={setShowScroll} setDetailItem={setDetailItem} />
                <Sksq onDetail={item => {
                    setHdDetailItem(null);
                    setYqDetailItem(null);
                    setSkDetailItem(item);
                    setDatas1(null)
                }} setShowScroll={setShowScroll} setDetailItem={setDetailItem} />

            </div>
            {/* <div ref={popupRef} style={{
                display: 'inline-block',
                whiteSpace: 'nowrap',
                borderRadius: 10,/* 设置圆角半径 */
                /*backgroundColor: 'black', /* 设置背景色为黑色 */
                /*padding: 10, /* 可选：添加内边距以增加可读性 */
                /*color: 'white',/* 可选：设置文本颜色为白色 */
           /* }} >{qp}</div> */}
        </PanelLeft>

        <WaterInformation datas1={hdDetailItem || yqDetailItem || skDetailItem}></WaterInformation>

        <Example datas={[
            {
                name: '雨情监测',
                type: 'yq',
                iconPath: resourcePath.mapIcons.yq
            }, {
                name: '河道水情',
                type: 'hd',
                iconPath: resourcePath.mapIcons.hd
            }, {
                name: '水库水情',
                type: 'sk',
                iconPath: resourcePath.mapIcons.sk
            }, {
                name: '预警信息',
                type: 'hongs',
                iconPath: resourcePath.mapIcons.yjxx_red,
            }
        ]} onVisibleChange={(checked, value) => {
            const yjLayer = map.getLayers().getArray().find(l => l.get('type') === 'hongs');
            [yjLayer, ...layers].find(layer => layer.get('type') === value)?.set('visible', checked)
        }} jcdListDates={jcdListDates} />
        <div style={{ display: !datas1 ? 'flex' : 'none' }}>
            {/* <YqDetail /> */}
            {hdDetailItem && <HdDetail item={hdDetailItem} onClose={e => {
                setHdDetailItem(null);
                //clearHighlight(map)
            }} setDatas1={datagx} setDatas2={setDatas2} setDatas3={setDatas3} detailItem={detailItem} setCbYxList={setCbYxList} />}

            {yqDetailItem && <YqDetail item={yqDetailItem} onClose={e => {
                setYqDetailItem(null);
                //clearHighlight(map)
            }} setDatas1={datagx} setDatas2={setDatas2} setDatas3={setDatas3} detailItem={detailItem} setCbYxList={setCbYxList} />}
            {skDetailItem && <SkDetail item={skDetailItem} onClose={e => {
                setSkDetailItem(null)
                //clearHighlight(map)
            }} setDatas1={datagx} setDatas2={setDatas2} setDatas3={setDatas3} detailItem={detailItem} setCbYxList={setCbYxList} />}
        </div>
        {/* {!skDetailItem && !yqDetailItem && !hdDetailItem && } */}
        <div style={{
            display: xlName ? 'none' : 'block'
        }}>
            {datas1 && <Xq datas1={datas1} datas2={datas2} datas3={datas3} onClose={e => { setDatas1(null) }} onName={setXlName}></Xq>}
        </div>

        <Fxpg visble={rightVisible} />
        {
            datas1 && xlName && <DzenXqDetail xlName={xlName} datas1={datas1} onClose={() => setXlName(null)} />
        }



    </>;
}